<template>
	<view class="" style="padding-bottom: 240rpx;">
		<Header :title="title" :isHome="true" :isWhite='true'></Header>
		<view class="totalNum">
			<view class="total">
				<view class="totalNumTitle">
					答对
				</view>
				<view class="totalNumCon" v-if="info.correct_num">
					{{info.correct_num}}题
				</view>
			</view>
			<view class="line">

			</view>
			<view class="total">
				<view class="totalNumTitle">
					答错
				</view>
				<view class="totalNumCon" v-if="info.error_num">
					{{info.error_num}}题
				</view>
			</view>
			<view class="line">

			</view>
			<view class="total">
				<view class="totalNumTitle">
					总分
				</view>
				<view class="totalNumCon" v-if="info.total_score">
					{{info.total_score}}分
				</view>
			</view>
			<view class="line">

			</view>
			<view class="total">
				<view class="totalNumTitle" v-if="info.obtain_score">
					得分
				</view>
				<view class="totalNumCon">
					{{info.obtain_score}}分
				</view>
			</view>
		</view>
		<view class="" v-for="(item,index) in resultList" :key="index">
			<view class="title">
				<span style="margin-right: 20rpx;">
					{{index+1}}、{{item.topic}}
				<!-- 	<rich-text :nodes="item.topic"></rich-text> -->({{item.score}}分)</span>
				<span class="typeLogo" v-if="item.answer_type=='FILL'">
					填空题
				</span>
				<span class="typeLogo" v-if="item.answer_type=='JUDGE'">
					判断题
				</span>
				<span class="typeLogo" v-if="item.answer_type=='ONE'">
					单选
				</span>
				<span class="typeLogo" v-if="item.answer_type=='MANY'">
					多选
				</span>
			</view>
			<view class="" v-if="item.images" v-for="i in item.images">
				<image :src="imgUrl+i" mode="" class="bookImg"></image>
			</view>
			<view class="all">
				<view class="answer">
					<view class="">
						<view class="rightAnswer">
							正确答案：<span>{{item.z_text}}</span>
						</view>
						<view :class="item.result==1?'selectedAnswerRight':'selectedAnswerWrong'">
							已选答案：<span>{{item.x_text}}</span>
						</view>
					</view>
					<view class="" v-if="item.result==1">
						<image src="/static/right.png" mode="" class="wrong"></image>
					</view>
					<view class="" v-else>
						<image src="/static/wrong.png" mode="" class="wrong"></image>
					</view>
				</view>
				<view class="allBtn" v-if="item.result!=1">
					<view class="case" @click="goPage('/subpages/banner/case?id='+item.id)">
						访题案例
					</view>
					<view class="analysis" @click="goPage('/subpages/banner/analysis',item)">
						错题解析
					</view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="bottom-info">
				<view class="counselor" @click="show=true">
					<view class="">
						<image src="/static/counselor.png" mode=""></image>
					</view>
					<view class="">
						学习顾问
					</view>
				</view>
				<view class="synchronization" @click="getRanking()">
					同步排行榜
				</view>
				<view class="again" @click="goPage('/subpages/banner/examination?id='+paperId+'&info='+JSON.stringify(sbjInfo))">
					再答一次
				</view>
			</view>
		</view>
		<view>
			<u-popup :show="show" :round="12" mode="center" @close="close" @open="open">
				<view class="popContent">
					<view class="title">学习顾问</view>
					<view class="">
						<image :src="imgUrl+qrcode" mode="" class="qr" @click="handleLook(imgUrl+qrcode)"></image>
					</view>
					<view class="popCon">
						长按微信二维码
					</view>
					<view class="popCon">
						学习顾问将为您的学习提供服务
					</view>
					<image src="/static/close.png" mode="" class="close" @click="show=false"></image>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import {
		get,
		img_url,
		post
	} from '../../utils/request';
	export default {
		data() {
			return {
				id: '',
				paperId: '',
				imgUrl: img_url,
				qrcode:'',
				show: false,
				title: '同步练结果查看',
				info: {},
				resultList: [],
				sbjInfo: {}
			}
		},
		onLoad(opt) {
			this.id = opt.id
			if(opt.info){
				this.sbjInfo = JSON.parse(opt.info)
			}
			this.paperId = opt.paperId
			this.getPaperInfo()
			this.getQrcode()
		},
		methods: {
			getPaperInfo() {
				get('/answer_statistics/asinfo?as_id=' + this.id).then(res => {
						this.info = res.data
						this.resultList = res.data.questions
						this.sbjInfo = {
							subject_id:res.data.subject_id,
							grade_id:res.data.grade_id,
							module_id:res.data.module_id
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			getRanking() {
				get('/paper/refresh_ranking?as_id=' + this.id).then(res => {
						if (res.code == 1) {
							uni.navigateTo({
								url: '/subpages/banner/leaderboard?info=' + JSON.stringify(this.sbjInfo)
							})
						} else {
							uni.showToast({
								title: '获取同步排行榜失败'
							})
						}
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});

			},
			getQrcode() {
				get('/system/get_contact')
					.then(res => {
						this.qrcode = res.data.qrcode
					})
					.catch(err => {
						console.error('GET 请求失败:', err);
					});
			},
			goPage(url, item) {
				if (item) {
					console.log(item,111111111);
					const questionId = item.id
					const as_id = this.info.id
					const title = item.topic
					const newUrl = `${url}?questionId=${questionId}&as_id=${as_id}&title=${encodeURIComponent(title)}`;
					// const analysis = item.analysis
					// const newUrl = `${url}?title=${title}&analysis=${analysis}`;
					uni.navigateTo({
						url: newUrl
					});
				} else {
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.totalNum {
		display: flex;
		justify-content: space-between;
		padding: 24rpx 50rpx;
		background-color: #fff;
		position: sticky;

		.total {
			text-align: center;
		}

		.line {
			width: 1rpx;
			height: 60rpx;
			background-color: #f5f5f5;
		}

		.totalNumTitle {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 22rpx;
			color: #999999;
		}

		.totalNumCon {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 26rpx;
			color: #222222;
		}
	}

	.typeLogo {
		background-image: linear-gradient(90deg, #FAE17D 0%, #FFD275 100%);
		border-radius: 4rpx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 22rpx;
		color: #222222;
		padding: 5rpx 10rpx;
		margin-right: 20rpx;
	}

	.bookImg {
		width: 686rpx;
		height: 300rpx;
		margin: 20rpx auto;
		display: block;
	}

	.title {
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 30rpx;
		color: #222222;
		padding: 20rpx 32rpx;
	}

	.all {
		width: 686rpx;
		background: #F0F0F0;
		padding: 28rpx;
		box-sizing: border-box;
		border-radius: 12rpx;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 28rpx;
		color: #222222;
		margin: 20rpx auto;

		.allBtn {
			display: flex;
			justify-content: flex-end;
			padding: 20rpx 0;
			border-top: 1rpx solid #ccc;
			margin-top: 20rpx;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			color: #1A1A1A;

			view {
				width: 144rpx;
				height: 56rpx;
				border-radius: 6rpx;
				text-align: center;
				line-height: 56rpx;
			}

			.case {
				border: 2rpx solid #1A1A1A;
			}

			.analysis {
				margin-left: 20rpx;
				background: #FFD275;

			}
		}
	}

	.answer {

		display: flex;
		align-items: center;
		justify-content: space-between;

		.wrong {
			width: 100rpx;
			height: 100rpx;
		}

		.rightAnswer {
			margin-bottom: 12rpx;

			span {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 28rpx;
				color: #222222;
			}
		}

		.selectedAnswerRight {
			margin-bottom: 12rpx;

			span {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 28rpx;
				color: #38BD69;
			}
		}

		.selectedAnswerWrong {
			margin-bottom: 12rpx;

			span {
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 28rpx;
				color: #F54040;
			}
		}
	}

	.bottom {
		position: fixed;
		width: 100%;
		// height: 188rpx;
		padding-bottom: 50rpx;
		bottom: 0;
		background-color: #fff;
		font-family: PingFangSC-SNaNrpxibold;
		font-weight: 600;
		font-size: 26rpx;
		color: #222222;

		.submitBtn {
			width: 510rpx;
			height: 96rpx;
			background: #FFD275;
			border-radius: 48rpx;
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 32rpx;
			color: #1A1A1A;
			text-align: center;
			line-height: 96rpx;
			margin: 0 auto;
		}

		.bottom-info {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 35rpx 0;
			box-sizing: border-box;

			.counselor {
				text-align: center;

				image {
					width: 40rpx;
					height: 40rpx;
				}
			}

			.synchronization {
				width: 259rpx;
				height: 96rpx;
				background: #FFFFFF;
				border: 2rpx solid #1A1A1A;
				border-radius: 48rpx;
				text-align: center;
				line-height: 96rpx;
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 32rpx;
				color: #1A1A1A;
			}

			.again {
				width: 259rpx;
				height: 96rpx;
				background: #FFD275;
				border-radius: 48rpx;
				text-align: center;
				line-height: 96rpx;
				font-family: PingFangSC-SNaNrpxibold;
				font-weight: 600;
				font-size: 32rpx;
				color: #1A1A1A;
			}

		}

		.bottom-flex {
			display: flex;
		}
	}

	.popContent {
		width: 630rpx;
		height: 774rpx;
		border-radius: 24rpx;
		text-align: center;
		position: relative;

		.popCon {
			font-family: PingFangSC-Regular;
			font-weight: 400;
			font-size: 26rpx;
			color: #555555;
			margin: 20rpx 0;
		}

		.close {
			position: absolute;
			width: 72rpx;
			height: 72rpx;
			bottom: -100rpx;
			left: 280rpx;
		}

		.title {
			font-family: PingFangSC-SNaNrpxibold;
			font-weight: 600;
			font-size: 36rpx;
			color: #1A1A1A;
			margin: 50rpx 0;

		}


		.qr {
			width: 400rpx;
			height: 400rpx;
		}
	}
</style>